import React, { Component, Fragment } from 'react'
import { Tooltip, Modal, Form, Button, message, Input } from 'antd'
import { CopyToClipboard } from 'react-copy-to-clipboard'

import { address } from '@/Utils/apiConfig'
import request from '@/Utils/fecth'

import IconFont from '@/components/IconFont'

import './index.less'

const { TextArea } = Input
const { license } = address

export default class AuthTip extends Component {
  state = {
    loading: false,
    visible: false,
    requestCode: '',
    expireDate: '',
    functionActivated: false,
  }

  componentDidMount() {
    this.getActivateStatus()
  }

  getActivateStatus = async() => {
    const { status, data = {}} = await request().get(license.getStatus)
    if (status === 200 && data) {
      this.setState({
        requestCode: data.requestCode,
        expireDate: data.expireDate,
        functionActivated: data.functionActivated,
      })
    }
  }

  // 提交表单
  handleSubmit = () => {
    this.avtivateForm && this.avtivateForm.validateFields().then(async(values) => {
      this.setState({
        loading: true,
      })
      const { status, data = {}} = await request().post(license.activate, values)
      this.setState({
        loading: false,
      })
      if (status === 200 && data.activated) {
        message.success('操作成功')
        this.setState({
          visible: false,
        })
        this.getActivateStatus()
      }
    })
  };

  render() {
    const { visible, requestCode, loading, expireDate, functionActivated } = this.state
    return <Fragment>
      {
        functionActivated &&
        <div className="AuthTip">
          <p className="title">
            <Tooltip arrowPointAtCenter placement="topLeft" overlayClassName="auth-tip-tooltip" title={'授权到期后，将不能再登录平台与调用API，为避免您的业务受影响，请提前联系服务提供者延长授权时间。'}>
              <IconFont className="cursor" type="ic-tishi1" style={{ fontSize: '16px' }} />
            </Tooltip>
      授权日期至
          </p>
          {
            expireDate &&
          <p className="time">{expireDate}</p>
          }
          <div className="handle">
            <div className="button" onClick={() => this.setState({ visible: true })}>延长</div>
          </div>
        </div>
      }
      <Modal title="激活"
        visible={visible}
        onOk={this.handleSubmit}
        destroyOnClose
        okButtonProps={{
          loading,
        }}
        onCancel={() => this.setState({ visible: false })}>
        <div className="login_form">
          <Form
            className="login_form_box"
            name="avtivate"
            layout="vertical"
            ref={(ref) => (this.avtivateForm = ref)}
            colon={false}
            hideRequiredMark={true}
          >
            {
              requestCode &&
              <div className="mb24 requestCode">
                请求码: {requestCode}
                <CopyToClipboard text={requestCode}
                  onCopy={() => message.success('复制成功')}>
                  <Button style={{ marginLeft: 'auto' }}>复制</Button>
                </CopyToClipboard>
              </div>
            }
            <Form.Item
              name="activateCode"
              label=""
              rules={[{ required: true, message: '请输入您的激活码' }]}
            >
              <TextArea
                className="input"
                placeholder="请输入您的激活码"
                rows={5}
                autoSize={false}
              />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </Fragment>
  }
}
